
<section id="expenditure-config" class="ml-24 mr-24">
	<div class="font-16 mt-10">楼层、单元、面积配置</div>
	<div class="dy-flex mt-15">
		<div class="dy-fx-1 line-height-34 cursor" @click="moduleSelect">
			<span class="expend-radio-item" :class="{border: !moduleflga, 'n-btn-primary': moduleflga, active: moduleflga}"></span>
			<span>模版选择:</span>
		</div>
		<div class="dy-fx-8">
			<div class="select-ul" style="width: 180px;">
				<span class="select-name br-4 cursor" ref="modules">请选择</span>
			  <ul>
			    <li v-for="(item, index) in templateLt" @click="templateSel(item)">{{ item.name }}</li>
			  </ul>
			</div>
		</div>
	</div>

	<div class="dy-flex mt-15">
		<div class="dy-fx-1 line-height-34">
			<span class="icon-uncheck" style="color: #fff;"></span>
			<span>模版包含:</span>
		</div>
		<div class="dy-fx-8 color-999 lin-hei-34">
			<span v-for="(item, index) in moduleContain">{{ item.expenditureName }} <i v-if="index < moduleContain.length-1">、</i></span>
		</div>
	</div>

	<div class="dy-flex mt-15" style="flex-direction: column">
		<div class="dy-fx-1 line-height-34 cursor dy-flex"   style="align-items: center">
			<span class="expend-radio-item" :class="{border: !freeflag, 'n-btn-primary': freeflag, active: freeflag}" @click="freeSelect"></span>
			<span style="margin:0 30px 0 5px" @click="freeSelect">自由配置:</span>
			<div class="auth-config-pop dy-flex" >
				<input type="text" class="form-control" style="width: 110px;background: #fff" v-model="templateName" :disabled="!freeflag">
				<div @click="templateFlag = !templateFlag">
					<span class="auth-item" :class="{'js-q-active': templateFlag}" style="margin: 3px 3px 0 25px"></span>
					保存模板
				</div>
			</div>
		</div>
		<div class="dy-fx-8 dy-flex" style="flex-wrap: wrap;margin-top: 17px;">
			<div class="select_List">
				<div v-if="expendLt.expenditureBootListS.length">
					<p>系统费项</p>
					<div class="clearfix">
						<div v-for="item in expendLt.expenditureBootListS" style="float:left;">
							<el-tooltip :content="item.name" placement="top" v-if="item.name.length > 6">
								<button class="expenditure-item text-center mr-10 mb-10" :class="{border: freeIds.indexOf(item.id) == -1, 'bg-fff': freeIds.indexOf(item.id) == -1, 'n-btn-primary': freeIds.indexOf(item.id) > -1}" @click="freeConfig(item)">{{ item.name }}</button>
							</el-tooltip>

							<button class="expenditure-item text-center mr-10 mb-10" :class="{border: freeIds.indexOf(item.id) == -1, 'bg-fff': freeIds.indexOf(item.id) == -1, 'n-btn-primary': freeIds.indexOf(item.id) > -1}" @click="freeConfig(item)" v-if="item.name.length <= 6">{{ item.name }}</button>
						</div>
					</div>
				</div>
				<div v-if="expendLt.expenditureBootListP.length">
					<p>周期性费项</p>
					<div class="clearfix">
						<div v-for="item in expendLt.expenditureBootListP" style="float:left;">
							<el-tooltip :content="item.name" placement="top" v-if="item.name.length > 6">
								<button class="expenditure-item text-center mr-10 mb-10" :class="{border: freeIds.indexOf(item.id) == -1, 'bg-fff': freeIds.indexOf(item.id) == -1, 'n-btn-primary': freeIds.indexOf(item.id) > -1}" @click="freeConfig(item)">{{ item.name }}</button>
							</el-tooltip>

							<button class="expenditure-item text-center mr-10 mb-10" :class="{border: freeIds.indexOf(item.id) == -1, 'bg-fff': freeIds.indexOf(item.id) == -1, 'n-btn-primary': freeIds.indexOf(item.id) > -1}" @click="freeConfig(item)" v-if="item.name.length <= 6">{{ item.name }}</button>
						</div>
					</div>
				</div>
				<div v-if="expendLt.expenditureBootListO.length">
					<p>一次性费项</p>
					<div class="clearfix">
						<div v-for="item in expendLt.expenditureBootListO" style="float:left;">
							<el-tooltip :content="item.name" placement="top" v-if="item.name.length > 6">
								<button class="expenditure-item text-center mr-10 mb-10" :class="{border: freeIds.indexOf(item.id) == -1, 'bg-fff': freeIds.indexOf(item.id) == -1, 'n-btn-primary': freeIds.indexOf(item.id) > -1}" @click="freeConfig(item)">{{ item.name }}</button>
							</el-tooltip>

							<button class="expenditure-item text-center mr-10 mb-10" :class="{border: freeIds.indexOf(item.id) == -1, 'bg-fff': freeIds.indexOf(item.id) == -1, 'n-btn-primary': freeIds.indexOf(item.id) > -1}" @click="freeConfig(item)" v-if="item.name.length <= 6">{{ item.name }}</button>
						</div>
					</div>
				</div>
				<div style="margin: 10px;" class="dy-flex">
					<div style="min-width: 45px;padding-left:16px;">已选：</div>
					<div>
						<span v-for="item in freeNames" style="margin-right: 14px;color:#EA733D">{{item}}</span>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="font-16 mt-15 pt-15">租金配置</div>

	<div class="dy-flex mt-15">
		<div class="dy-fx-1 line-height-34">
			<span>租金滞纳金比例:</span>
		</div>
		<div class="dy-fx-8 color-999 lin-hei-34">
			<input type="number" class="form-control inline" style="width: 240px;" v-model="projectJs.rentLateFeePercent">
			<span>%</span>
		</div>
	</div>

	<div class="font-16 mt-15 pt-15">合同配置</div>

	<div class="dy-flex mt-15">
		<div class="dy-fx-1 line-height-34">
			<span>合同编号前缀:</span>
		</div>
		<div class="dy-fx-8 color-999 lin-hei-34">
			<input type="text" class="form-control inline" style="width: 240px;" v-model="projectJs.contractNoPrefix">
		</div>
	</div>

	<div class="dy-flex mt-15">
		<div class="dy-fx-1 line-height-34">
			<span>合同名称前缀:</span>
		</div>
		<div class="dy-fx-8 color-999 lin-hei-34">
			<input type="text" class="form-control inline" style="width: 240px;" v-model="projectJs.contractNamePrefix">
		</div>
	</div>

	<div class="mt-15 border-t pt-15">
		<hl-button @on-click="saveExpend" type="primary">保存配置</hl-button>
	</div>

	<div class="pt-15 mt-15 mb-20" v-if="auth.indexOf('c136') > -1">
		<div class="font-16">财务配置</div>

		<div class="dy-flex">
			<div class="dy-fx-1 line-height-40">账单模版配置:</div>
			<div class="dy-fx-5 br-4 border">
				<div class="dy-flex text-center line-height-40" style="background:rgba(249,249,249,1);">
					<div class="dy-fx-5">模板名称</div>
					<div class="dy-fx-1">是否默认</div>
					<div class="dy-fx-2">操作</div>
				</div>
				<div class="dy-flex text-center line-height-40 border-t" v-for="(item, index) in billTemplateLt">
					<div class="dy-fx-5 border-r">{{ item.name }}</div>
					<div class="dy-fx-1 border-r">{{ item.isDefault == 'N' ? '否': '是' }}</div>
					<div class="dy-fx-2">
						<a href="javascript:;" class="mr-5" @click="delEditBill(index)">删除</a>
						<a href="javascript:;" @click="defaultSel(index)" v-if="item.isDefault == 'N'" v-show="auth.indexOf('c137') > -1">设为默认</a>
					</div>
				</div>
				<div class="dy-flex text-center line-height-40 border-t" v-for="(item, index) in addBillTemplateLt">
					<div class="dy-fx-5 border-r">
						<div class="select-ul" style="width: 180px;margin-top: -1px;">
							<span class="select-name br-4 cursor" ref="templateHtml" style="text-indent: 0em;">请选择</span>
						  <ul>
						    <li v-for="(item0, index0) in billAllTemplateDt" @click="billAllTemplateSel(item0, index)">{{ item0.name }}</li>
						  </ul>
						</div>
					</div>
					<div class="dy-fx-1 border-r">{{ item.isDefault == 'N' ? '否': '是' }}</div>
					<div class="dy-fx-2">
						<a href="javascript:;" class="mr-5" @click="delAddBill(index)">删除</a>
						<a href="javascript:;" @click="defaultSel(index)" v-show="auth.indexOf('c137') > -1">设为默认</a>
					</div>
				</div>
			</div>
			<div class="dy-fx-3"></div>
		</div>
		<div class="dy-flex">
			<div class="dy-fx-1"></div>
			<div class="dy-fx-5" style="marginTop:10px;">
				<hl-button @on-click="addTemplateDt">添加</hl-button>
			</div>
			<div class="dy-fx-3"></div>
		</div>

		<div class="dy-flex mt-15 pt-15">
			<div class="dy-fx-1"></div>
			<div class="dy-fx-5">
			<hl-button @on-click="saveBillTemplate" type="primary">保存</hl-button>
			</div>
			<div class="dy-fx-3"></div>
		</div>
	</div>
</section>

<style type="text/css">
	.expenditure-item {
		width: 102px;
		min-width: 102px;
		height: 34px;
		border-radius: 4px;
		margin:0 16px 10px;
		text-overflow:ellipsis;
		white-space:nowrap;
		overflow:hidden;
		padding:0 6px;
	}
	.expend-radio-item {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		width: 13px;
		height: 13px;
		min-width: auto;
		margin-top: -3px;
		border-radius: 50%;
	}
	.expend-radio-item.active:before {
		content: '';
		position: absolute;
		width: 5px;
		height: 5px;
		background-color: #fff;
		left: 4px;
		top: 4px;
		border-radius: 50%;
	}
	.new-module-check {
		width: 14px;
		height: 14px;
		display: inline-block;
		vertical-align: middle;
		margin-top: -2px;
		min-width: auto;
	}
	.select_List{
		width: 100%;
		background:rgba(255,255,255,1);
		box-shadow:0px 0px 5px 0px rgba(188,188,188,0.5);
		border-radius:4px;
	}
	.select_List>div{
		margin-bottom: 30px;
	}
	.select_List p{
		color: #666666;
		font-size: 14px;
		margin-bottom: 18px;
		background-color:#f2f2f2;
		padding:0 16px;
		line-height:40px;
	}
</style>

<script src="modules/projectConfig/scripts/expenditure.js" charset="utf-8"></script>
